<script setup>
import {onMounted, computed} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage,
  NDrawer,
  NDrawerContent,
  NTable,
  NSpin,
  NEmpty,
  NScrollbar,
  NEllipsis,
  NDatePicker,
  NPagination
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
import g from 'file-saver';

const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '订单',
  initForm: {},
  doCreate: api.createOrder,
  doDelete: api.deleteOrder,
  doUpdate: api.updateOrder,
  refresh: () => on_ref(),
})

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  orders: [],
  card_loading: false,
  goods_loading: false,
  card_name: "",
  category_id: 0,
  dd_type: [
    {
      "label": "商品",
      "value": 0
    },
    {
      "label": "储值",
      "value": 1
    }
  ],
  db_type: [
    {
      "label": "否",
      "value": 0
    },
    {
      "label": "是",
      "value": 1
    }
  ],
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0
    }
  },
  tab_goods: [],
  meeting_users: [],
  config: [],
  uploadAction: base_path + '/system/base/userimg',
  token: getToken(),
  pay: false,
  pay_data: [],
  payForm: {
    id: 0,
    order_id: 0,
    pay_type: 3,
    images: [],
    images_pc: []
  },
  get_jf_data: [],
  fjq: [],
  keyword: "",
  select_goods: [],
  // 日期范围，默认今天
  dateRange: [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
  // 分页相关
  currentPage: 1,
  pageSize: 20, // 每页显示20条
  order_more:false,
  chuzhi:1,
  tempDeductValue: 0,
  tempZhekouValue: 100,
  tempPriceValue: 0,
  currentPriceIndex: -1,
  cardDrawerVisible: false,
  currentOrderItem: null,
  projectStatDrawerVisible: false,
  projectStatLoading: false,
  projectStatData: [],
  currentProjectStatItem: null,
  currentProjectStatValue: null,
  // 订单备注编辑状态
  remarkEditing: {}
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})

const expandedIds = ref([]); // 显式控制展开项

function on_ref() {
  get_order_list()
  get_jf()
}

function get_order_list() {
  data.card_loading = true
  const params = {
    user_id: data.select_customer.user_id,
    keyword: data.keyword
  }
  
  // 添加日期范围参数
  if (data.dateRange && data.dateRange.length === 2) {
    const startDate = new Date(data.dateRange[0])
    const endDate = new Date(data.dateRange[1])
    params.start_time = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')} 00:00:00`
    params.end_time = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} 23:59:59`
  }
  
  api.getOrders(params).then((res) => {
    data.card_loading = false
    data.loading = false
    data.orders = res.data.items
    // 重置到第一页
    data.currentPage = 1
    if(data.orders.length>0){
      expandedIds.value = data.orders[0].id;
    }

  })
}

// 计算当前页显示的数据（分页）
const paginatedOrders = computed(() => {
  const start = (data.currentPage - 1) * data.pageSize
  const end = start + data.pageSize
  return data.orders.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(data.orders.length / data.pageSize)
})

// 分页改变事件
function handlePageChange(page) {
  data.currentPage = page
  // 滚动到顶部
  const container = document.querySelector('.container')
  if (container) {
    container.scrollTop = 0
  }
}

const handleExpand = (names) => {
  expandedIds.value = names;
};

function add_order() {
  api.getConfig().then((res) => {
    data.config = res.data
  })
  api.getMeetingUsers({types: 3}).then((res) => {
    data.meeting_users = res.data.list
  })
  data.category_id = 0
  data.order_more = false
  get_goods()
  handleAdd()
  data.fujia = []
  modalForm.value.goods = []
  modalForm.value.flag = 0
  modalForm.value.display = 0
  modalForm.value.display_num = 0
  modalForm.value.is_db = 0
  modalForm.value.card_id = 22705
  modalForm.value.user_id = data.select_customer.user_id
  modalForm.value.deducts = {
    "weimei": 0,
    "fujia": 0,
    "cdp": 0,
    "deduct": 0,
    "total_zhekou":100,
  }
  modalForm.value.pay_money=0
}

function get_goods() {
  data.goods_loading = true
  api.getCardList({
    category_id: data.category_id,
    page_size: 20,
    title: data.card_name
  }).then((res) => {
    data.tab_goods = res.data
    data.goods_loading = false
  })
}

function fjq_money(){
  // 移除这里的卡券抵扣，现在在pay_money()函数末尾统一处理
  // modalForm.value.pay_money = Math.round((modalForm.value.pay_money - modalForm.value.deducts.fujia) * 100) / 100
  pay_money()
}

function pay_money1(){
  modalForm.value.display = 1
  pay_money()
}

async function pay_money() {
  await nextTick()
  modalForm.value.pay_money = 0
  modalForm.value.goods.map(good_item => {
    let num = good_item.num
    if(data.category_id===99){
      num = data.chuzhi
    }
    modalForm.value.pay_money += Math.round(good_item.money * num * 100) / 100
  });
  const pay_m = Math.round(modalForm.value.pay_money * 100) / 100
  // 移除这里的卡券抵扣，避免重复扣除
  // modalForm.value.pay_money = Math.round((pay_m - modalForm.value.deducts.fujia) * 100) / 100
  modalForm.value.goods.map(good_item => {
    let num = good_item.num
    if(data.category_id===99){
      num = data.chuzhi
    }
    let good_price = 0
    const money = Math.round((good_item.money*num/pay_m)*modalForm.value.pay_money*100)/100
    console.log(good_item.zhekou)
    good_price = Math.round(money * good_item.zhekou/100 * 100) / 100
    good_item.price = Math.round(good_price * 10) / 10
    good_item.base_price = good_item.price
  });
  if(modalForm.value.deducts.total_zhekou<100){
    modalForm.value.pay_money = Math.round(modalForm.value.pay_money*modalForm.value.deducts.total_zhekou*100) / 10000
  }
  if(modalForm.value.deducts.total_zhekou===100){
    modalForm.value.pay_money = 0
    modalForm.value.goods.map(good_item => {
      modalForm.value.pay_money += good_item.price
    });
    modalForm.value.pay_money = Math.round(modalForm.value.pay_money * 100) / 100
  }
  if(modalForm.value.deducts.deduct>0){
    deducts_zk()
  }
  
  // 统一处理卡券抵扣，避免重复扣除
  modalForm.value.pay_money = Math.round((modalForm.value.pay_money - modalForm.value.deducts.fujia) * 100) / 100
  
  // 统一处理应收和佣金基础的卡券抵扣
  if(modalForm.value.deducts.fujia > 0) {
    const total_price_before_fujia = modalForm.value.pay_money + modalForm.value.deducts.fujia
    modalForm.value.goods.map(good_item => {
      // 按比例分配卡券抵扣到每个商品
      const good_ratio = good_item.price / total_price_before_fujia
      const fujia_deduct_for_good = Math.round(modalForm.value.deducts.fujia * good_ratio * 100) / 100
      good_item.price = Math.round((good_item.price - fujia_deduct_for_good) * 10) / 10
      good_item.base_price = good_item.price
    });
  }
}

function deducts_zk(){
  if(modalForm.value.deducts.deduct>0){
    modalForm.value.deducts.total_zhekou = Math.round(modalForm.value.deducts.deduct/(modalForm.value.pay_money)*100 * 10000) / 10000
    // modalForm.value.pay_money = Math.round((modalForm.value.deducts.deduct) * 100) / 100

    modalForm.value.goods.map(good_item => {
      good_item.zhekou = modalForm.value.deducts.total_zhekou
      good_item.price = Math.round(good_item.price * good_item.zhekou /100* 10) / 10
      good_item.base_price = Math.round(good_item.price * 10) / 10
    })
    modalForm.value.pay_money = Math.round(modalForm.value.deducts.deduct * 10) / 10

  }
}
async function ys(){
  modalForm.value.goods.map(good_item => {
    let num = good_item.num
    good_item.zhekou =  Math.round(good_item.price/good_item.money/num*100 * 10000) / 10000;
    good_item.base_price = Math.round(good_item.price * 10) / 10
    if(good_item.zhekou>100){
      good_item.zhekou = 100
      good_item.price = Math.round(good_item.money * num * 10) / 10
      good_item.base_price = Math.round(good_item.price * 10) / 10
    }
  })
  await pay_money()
  // modalForm.value.zhekou = modalForm.value.price/modalForm.value.money*100
}

async function zk(){
  modalForm.value.goods.map(good_item => {
    good_item.zhekou = modalForm.value.deducts.total_zhekou
  })
  await pay_money()
  // modalForm.value.zhekou = modalForm.value.price/modalForm.value.money*100
}

function go_cancel(item) {
  api.on_cancel({
    id: item.id,
  }).then((res) => {
    message.success('作废成功')
    on_ref()
  })
}

function get_jf() {
  api.get_jf({
    user_id: data.select_customer.user_id,
  }).then((res) => {
    data.get_jf_data = res.data
    data.fujia = res.data.fujia.unused
  })
}

function update_fjq() {
  let select_fjq = modalForm.value.fujia
  let fjq_ids = "";
  let fjq_price = 0;
  select_fjq.map(fjq_id => {
    fjq_ids += fjq_id + ",";
    let price = data.fujia.find(item => item.id === fjq_id)
    fjq_price += parseFloat(price.price)
  });
  modalForm.value.fjq_ids = fjq_ids
  modalForm.value.deducts.fujia = Math.round(fjq_price * 100) / 100
  message.success('选择附加券抵扣金额：'+modalForm.value.deducts.fujia)
  fjq_money()
}

function create_order() {
  modalForm.value.batches_money = modalForm.value.pay_money ? Math.round(modalForm.value.pay_money * 100) / 100 : 0
  //计算附加券fjq_ids,
  if (modalForm.value.pay_money < 0) {
    message.error('请检查金额是否正确')
    return
  }
  modalForm.value.goods.map(good_item => {
    good_item.money = good_item.money*good_item.num
  })
  api.createOrder(modalForm.value).then((res) => {
    message.success('挂单成功')
    on_ref()
    modalVisible.value = false
  })
}

function search_order() {
  data.loading = true
  data.currentPage = 1 // 搜索时重置到第一页
  get_order_list()
}

function handleUpdateValue(value) {
  if (value === "品项") {
    data.category_id = 88
  } else if (value === "套餐") {
    data.category_id = 0
  } else if (value === "储值") {
    data.category_id = 99
  } else if (value === "会员卡") {
    data.category_id = 100
  }
  get_goods()
}

function order_more(){
  data.order_more = !data.order_more
}

function handleChange(item,value){
  let cnt = 0
  if(value){

    item.card_project.forEach(itemx => {
      if(itemx.is_must==0){
         cnt += itemx.frequency
      }
    });

    if(cnt>item.must_check&&item.must_check>0){
      message.error('您选择的《'+item.title+'》需要勾选不能超过'+item.must_check+'个项目！')
      item.select = false
      return
    }
    if(item.category_id===99){
       message.success("变为储值订单,清空其他商品")
       modalForm.value.goods = []
       modalForm.value.flag = 1
    }else{
       message.success('锁定商品:'+item.title)
    }
    add_goods(item)
  }else{
    remove_goods(item)
    message.error('取消锁定商品:'+item.title)
  }
  pay_money()
  get_jf()
}

function add_goods(item){
  handleCheckboxChange(item.check_project_ids, item.card_project, item)

  const project_price = []
  const results = data.tab_goods.filter(item1 => item1.id === item.id);
  results[0].card_project.forEach(item2=>{
    if(item2.frequency>0){
      project_price.push(item2)
    }
  })

  let good_one = {
    "card_id":item.id,
    "title":item.title,
    "money":item.price,
    "num":1,
    "zhekou":100,
    "price":item.price,
    "base_price":item.price,
    "project_names":item.check_project_names,
    "project_ids":item.check_project_ids,
    "project_price":project_price,
    "project_hk_price":[],
  }
  modalForm.value.goods.push(good_one)
}

function remove_goods(item) {
  modalForm.value.goods = modalForm.value.goods.filter(
    good => good.card_id !== item.id
  );
}

function handleCheckboxChange(selectedValues, cardProjects, item) {
  const selectedItems = cardProjects.filter(project =>
    project.frequency>0
  );
  item.check_project_names = [];
  item.check_project_ids = []

  selectedItems.forEach(itemx => {
    const label = `${itemx.project.project_name}x${itemx.frequency}`;
    item.check_project_names.push(label);
    item.check_project_ids.push(itemx.project.id)
  });

}

function goods_remove(index){
  // message.error(modalForm.value.goods[index].card_id)
  data.tab_goods.forEach(item => {
    if(item.id===modalForm.value.goods[index].card_id){
      item.select = false
    }
  });
  pay_money()
  get_jf()
}

function initTempDeductValue() {
  data.tempDeductValue = modalForm.value.deducts.deduct
}

function confirmDeduct() {
  modalForm.value.deducts.deduct = data.tempDeductValue
  // 当设置整单优惠时，清空整单折扣
  modalForm.value.display = 1
  modalForm.value.display_num =1
  pay_money()
}

function initTempZhekouValue() {
  data.tempZhekouValue = modalForm.value.deducts.total_zhekou
}

function confirmZhekou() {
  modalForm.value.deducts.total_zhekou = data.tempZhekouValue
  // 当设置整单折扣时，清空整单优惠
  modalForm.value.display = 1
  modalForm.value.display_num =1
  zk()
}

function initTempPriceValue(index) {
  data.tempPriceValue = modalForm.value.goods[index].price
  data.currentPriceIndex = index
}

function confirmPrice() {
  if (data.currentPriceIndex >= 0) {
    modalForm.value.goods[data.currentPriceIndex].price = Math.round(data.tempPriceValue * 100) / 100
    modalForm.value.goods[data.currentPriceIndex].base_price = Math.round(modalForm.value.goods[data.currentPriceIndex].price * 100) / 100
    ys()
  }
  modalForm.value.display = 1
}

function openCardDrawer(item,value) {
  data.currentOrderItem = item
  data.currentOrderItemValue = value
  data.cardDrawerVisible = true
}

function closeCardDrawer() {
  // 重置开卡弹窗中的项目次数数据
  if (data.currentOrderItem && data.currentOrderItem.goods_arr) {
    data.currentOrderItem.goods_arr.forEach(item => {
      if (item.cards && item.cards.Projects) {
        item.cards.Projects.forEach(project => {
          project.frequency = 0
        })
      }
    })
  }
  
  data.cardDrawerVisible = false
  data.currentOrderItem = null
  data.currentOrderItemValue = null
}

function openProjectStatDrawer(item, value) {
  data.currentProjectStatItem = item
  data.currentProjectStatValue = value
  data.projectStatDrawerVisible = true
  data.projectStatLoading = true
  data.projectStatData = []
  
  // 调用接口获取数据
  api.getCaseProjectStat({
    order_id: item.id || item.order_id,
    card_id: value.card_id || value.id
  }).then((res) => {
    if (res.code === 200 && res.data) {
      data.projectStatData = Array.isArray(res.data) ? res.data : (res.data.list || [])
    }
    data.projectStatLoading = false
  }).catch((err) => {
    message.error('获取项目详情失败')
    data.projectStatLoading = false
  })
}

function closeProjectStatDrawer() {
  data.projectStatDrawerVisible = false
  data.projectStatData = []
  data.currentProjectStatItem = null
  data.currentProjectStatValue = null
}

function startEditRemark(item) {
  const oid = item.id || item.order_id
  if (!data.remarkEditing[oid]) {
    data.remarkEditing[oid] = { editing: true, text: item.remark || '' }
  } else {
    data.remarkEditing[oid].editing = true
    data.remarkEditing[oid].text = item.remark || ''
  }
}

function cancelEditRemark(item) {
  const oid = item.id || item.order_id
  if (data.remarkEditing[oid]) {
    data.remarkEditing[oid].editing = false
  }
}

function saveEditRemark(item) {
  const oid = item.id || item.order_id
  const payload = {
    order_id: oid,
    remark: (data.remarkEditing[oid] && data.remarkEditing[oid].text) || ''
  }
  api.update_remark(payload).then(() => {
    item.remark = payload.remark
    if (data.remarkEditing[oid]) {
      data.remarkEditing[oid].editing = false
    }
    message.success('备注已更新')
  }).catch(() => {
    message.error('更新备注失败')
  })
}

function calculateTotalRemainingValue() {
  if (!data.projectStatData || data.projectStatData.length === 0) {
    return 0
  }
  return data.projectStatData.reduce((total, project) => {
    const remainingValue = (project.number || 0) * (project.single_price || 0)
    return total + remainingValue
  }, 0)
}

function handleCardAction() {
  // 验证选择的总次数
  if (data.currentOrderItem && data.currentOrderItem.goods_arr && data.currentOrderItem.goods_arr.length > 0) {
    const numsSelect = data.currentOrderItem.goods_arr[0].nums_select
    
    // 计算当前选择的总次数
    let totalFrequency = 0
    const filteredGoods = data.currentOrderItem.goods_arr.filter(item => item.card_id === data.currentOrderItemValue.card_id)
    
    if (filteredGoods.length > 0 && filteredGoods[0].cards && filteredGoods[0].cards.Projects) {
      filteredGoods[0].cards.Projects.forEach(project => {
        if (project['is_must'] !== 1 && project.frequency && project.frequency > 0) {
          totalFrequency += project.frequency
        }
      })
    }
    
    // 检查总次数是否在允许范围内
    if (numsSelect > 0) {
      if (totalFrequency > numsSelect) {
        message.error(`您选择的总次数（${totalFrequency}次）超过了可选数量（${numsSelect}次），请调整后再试`)
        return
      }
      if (totalFrequency < numsSelect) {
        message.error(`您选择的总次数（${totalFrequency}次）少于可选数量（${numsSelect}次），请调整后再试`)
        return
      }
    }
  }
  
  // 收集开卡数据
  const filteredGoods = data.currentOrderItem.goods_arr.filter(item => item.card_id === data.currentOrderItemValue.card_id)
  let projectIds = []
  let projectNames = []
  let projectPrice = []
  
  if (filteredGoods.length > 0 && filteredGoods[0].cards && filteredGoods[0].cards.Projects) {
    filteredGoods[0].cards.Projects.forEach(project => {
      if (project.frequency && project.frequency > 0) {
        projectIds.push(project.project.id)
        projectNames.push(`${project.project.project_name}x${project.frequency}`)
        projectPrice.push({
          id: project.id,
          card_id: data.currentOrderItemValue.card_id,
          is_must: project.is_must,
          project: {
            id: project.project.id,
            price: project.project.price,
            project_name: project.project.project_name
          },
          combo_id: project.combo_id,
          cate_name: project.cate_name,
          frequency: project.frequency,
          created_at: project.created_at,
          deleted_at: project.deleted_at,
          project_id: project.project.id,
          updated_at: project.updated_at
        })
      }
    })
  }
  console.log(data.currentOrderItemValue.card_id)
  // 调用开卡接口
  api.use_card({
    user_id: data.select_customer.user_id,
    project_ids: projectIds,
    project_names: projectNames,
    project_price: projectPrice,
    order_id: data.currentOrderItem.id,
    card_id: data.currentOrderItemValue.card_id,
    nums: filteredGoods.length > 0 ? filteredGoods[0].num : 1,
  }).then((res) => {
    message.success('开卡成功')
    closeCardDrawer()
    // 刷新数据
    on_ref()
  }).catch((error) => {
    message.error('开卡失败，请重试')
    console.error('开卡失败:', error)
  })
}

</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">
    <div class="search" style="display: flex; align-items: center; gap: 10px;">
      <NInput size="large" @change="search_order" v-model:value="data.keyword" :loading="data.loading" clearable
              type="text" placeholder="请输入卡项,项目名称检索" style="flex: 1;"/>
      <span style="font-size: 14px; color: #666; white-space: nowrap;">时间范围：</span>
      <NDatePicker
        v-model:value="data.dateRange"
        type="datetimerange"
        clearable
        placeholder="请选择时间范围"
        style="width: 400px;"
        @update:value="search_order"
      />
    </div>
    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
      <n-scrollbar v-if="data.orders.length>0" style="max-height: calc(100vh - 225px);padding:0 20px 20px 0px">
        <n-collapse class="cards" accordion :trigger-areas="['main']" :expanded-names="expandedIds"
                    @update:expanded-names="handleExpand">

          <n-collapse-item :key="item.id" :name="item.id" v-for="item in paginatedOrders" class="card">
            <template #header>
              <div style="display: flex; align-items: center;justify-content: flex-start">
                <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                  <div style="display: flex">
                    <n-button type="info" dashed size="large">单号:{{ item.id }}</n-button>
                    <div style="height:40px;line-height:20px;margin-left: 10px">
                <span v-for="(item2, index) in item.goods_arr.slice(0, 4)" :key="index" style="margin-right: 5px">
                  {{ item2.title }}<span style="font-size: 12px">X{{ item2.num }}</span>
                </span>
                <span v-if="item.goods_arr && item.goods_arr.length > 4" style="margin-right: 5px; color: #999;">
                  ...
                </span>
                      <br>
                      <span style="font-size: 12px;color:#747586">购买于:{{ item.day_time }}</span>&nbsp;
                      <span style="font-size: 12px;color:#747586">订单原价:{{ item.original_price }}</span>&nbsp;
                      <span style="font-size: 12px;color:#747586">订单总额:{{ item.price }}</span>&nbsp;
                      <span style="font-size: 12px;color:#747586">实际付款:{{ item.pay_money }}</span>&nbsp;
                      <span style="font-size: 12px;color:#747586">折扣:{{ item.zhekou }}%</span>&nbsp;
                      <span style="font-size: 12px;color:#747586">其它折扣:{{
                        (parseFloat(item.cdp_dk) || 0) +
                        (parseFloat(item.weimei_dk) || 0) +
                        (parseFloat(item.other.fujia) || 0) +
                        (parseFloat(item.free_dk) || 0)
                      }}</span>&nbsp;
                    </div>
                  </div>
                </n-h6>
              </div>
            </template>
            <template #header-extra>
              <n-button type="primary" dashed disabled>{{ item.status_format }}</n-button>
            </template>

            <div class="project_list">
              <n-scrollbar x-scrollable>
                <div style="display: flex;gap: 10px;padding-bottom: 20px">
                  <n-card size="small" style="width: 100%" :bordered="false" hoverable
                          :segmented="{content: true,footer: 'soft',}">
                    <template #header>
                      <n-h6 prefix="bar" style="margin: 0;font-size: 14px">商品详情</n-h6>
                    </template>
                    <n-scrollbar x-scrollable style="max-width: 1300px;"  trigger="none">
                    <n-layout style="width: 1300px">
                          <n-layout-header>
                            <n-flex >
                              <n-tag size="large" style="width: 100px"> 已选商品 </n-tag>
                              <n-tag size="large" style="width: 260px"> 已选项目 </n-tag>
                              <n-tag size="large" style="width: 80px"> 单价 </n-tag>
                              <n-tag size="large" style="width: 50px"> 数量 </n-tag>
                              <n-tag size="large" style="width: 80px"> 折扣 </n-tag>
                              <n-tag size="large" style="width: 80px"> 应收 </n-tag>
                              <n-tag size="large" style="width: 80px"> 佣金基数 </n-tag>
                              <n-tag size="large" style="width: 130px"> 治疗日期</n-tag>
                              <n-tag size="large" style="width: 100px"> 结算科室 </n-tag>
                              <n-tag size="large" style="width: 100px"> 顾问 </n-tag>
                            </n-flex>
                          </n-layout-header>
                          <n-layout-content content-style="padding: 10px 0;" >
                            <n-dynamic-input v-model:value="item.goods_arr"   :max="item.goods.length" disabled>
                              <template #action="{ index, create, remove, move }">
                                    <n-space style="margin-left: 20px">

                                    </n-space>
                              </template>
                              <template #default="{ value , index}">
                                <n-flex>
                                  <n-input  placeholder="0" v-model:value="value.title" style="width: 100px" disabled />
                                   <n-select
                                    v-model:value="value.project_names"
                                    multiple
                                    disabled
                                    :max-tag-count="1"
                                     style="width: 260px"
                                    placeholder="无需选择"
                                  />

                                  <n-input  placeholder="0" v-model:value="value.money" style="width: 80px" disabled />
                                  <n-input-number disabled placeholder="0" min="1" :show-button="false" v-model:value="value.num"  style="width: 50px"/>
                                  <n-input-number  disabled placeholder="0" max="100" :show-button="false" v-model:value="value.zhekou" style="width: 80px">
                                    <template #suffix>%</template>
                                  </n-input-number>
                                  <n-input  placeholder="0" v-model:value="value.price" style="width: 80px" disabled />
                                  <n-input  placeholder="0" v-model:value="value.base_price" style="width: 80px" disabled />
                                  <n-input style="width: 130px" disabled  v-model:value="value.ss_date" placeholder="未填写"/>
                                  <NSelect
                                    v-model:value="value.keshi"
                                    :options="data.config.categorys"
                                    placeholder="未填写"
                                    filterable
                                    label-field="name"
                                    value-field="id"
                                    style="width: 100px"
                                    disabled
                                  />
                                  <NSelect
                                    v-model:value="value.face_id"
                                    :options="data.meeting_users"
                                    placeholder="未填写"
                                    filterable
                                    label-field="name"
                                    value-field="id"
                                    style="width: 100px"
                                    disabled
                                  />
                                  <n-button v-if="value.type === 0 && !value.is_kk && item.pay_status===2" @click="openCardDrawer(item,value)" type="success" style="margin-right:10px"><TheIcon icon="material-symbols:cards" :size="16" class="mr-5" />开卡</n-button>
                                  <n-button dashed v-if="value.type === 0 && value.is_kk" type="default" style="margin-right:10px" @click="openProjectStatDrawer(item, value)"><TheIcon icon="material-symbols:cards" :size="16" class="mr-5" />查看详情</n-button>
                                  <n-button disabled dashed v-if="value.type === 0 && item.pay_status!==2" @click="openCardDrawer(item,value)" type="success" style="margin-right:10px"><TheIcon icon="material-symbols:cards" :size="16" class="mr-5" />未收银</n-button>
                                </n-flex>
                              </template>
                            </n-dynamic-input>
                          </n-layout-content>
                        </n-layout>
                    </n-scrollbar>
                    <template #footer>
                      <div style="display: flex">

                        <div class="order_more">
                          <div class="text">订单总额:¥{{ item.price }}</div>
                          <div class="text">实际付款:¥{{ item.pay_money }}</div>
                        </div>
                        <div class="order_more">
                          <div class="text">订单原价:¥{{ item.original_price }}</div>
                          <div class="text">整单折扣:{{ item.zhekou }}%</div>
                        </div>
                        <div class="order_more">
                            <div class="text">整单优惠价:¥{{ item.other.deduct }}</div>
                            <div class="text">积分抵扣:¥{{ item.cdp_dk }}</div>
                        </div>
                        <div class="order_more">
                            <div class="text">储值抵扣:¥{{ item.weimei_dk }}</div>
                            <div class="text">卡券抵扣:¥{{ item.other.fujia }}</div>
                        </div>
                        <div class="order_more">
                            <div class="text">赠送金抵扣:¥{{ item.free_dk }}</div>
                            <div class="text">录入人:{{ item.butler }}</div>
                        </div>
                        <div class="order_more">
                            <div class="text" v-if="!(data.remarkEditing[item.id || item.order_id] && data.remarkEditing[item.id || item.order_id].editing)">
                              订单备注:{{ item.remark || '—' }}
                              <n-button size="tiny" text type="primary" style="margin-left:6px" @click.stop="startEditRemark(item)">编辑</n-button>
                            </div>
                            <div class="text" v-else style="display:flex; align-items:center; gap:6px; max-width: 380px;">
                              <n-input
                                size="small"
                                :maxlength="200"
                                show-count
                                placeholder="请输入订单备注"
                                v-model:value="data.remarkEditing[item.id || item.order_id].text"
                                style="flex:1; min-width: 120px;"
                              />
                              <n-button size="small" type="primary" @click.stop="saveEditRemark(item)">保存</n-button>
                              <n-button size="small" @click.stop="cancelEditRemark(item)">取消</n-button>
                            </div>
                        </div>
                      </div>
                    </template>
                  </n-card>

                </div>
              </n-scrollbar>
              <div style="margin-top: 10px">
<!--                <n-button v-if="item.pay_status===3||item.pay_status===1" type="error" style="margin-right:10px"-->
<!--                          @click="go_pay(item)">支付-->
<!--                </n-button>-->

                <!--              <n-button type="error" style="margin-right:10px">变更</n-button>-->

                <n-popconfirm @positive-click="go_cancel(item)">
                  <template #trigger>
                    <n-button type="error" style="margin-right:10px"><TheIcon icon="material-symbols:delete" :size="16" class="mr-5" />作废</n-button>
                  </template>
                  确定要作废订单吗？
                </n-popconfirm>
                </div>

            </div>

          </n-collapse-item>
        </n-collapse>
      </n-scrollbar>
      <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
      <!-- 分页组件 -->
      <div v-if="data.orders.length > 0" style="display: flex; justify-content: center; padding: 20px 0;">
        <NPagination
          v-model:page="data.currentPage"
          :page-count="totalPages"
          :page-size="data.pageSize"
          :item-count="data.orders.length"
          show-size-picker
          :page-sizes="[10, 20, 50, 100]"
          @update:page="handlePageChange"
          @update:page-size="(size) => { data.pageSize = size; data.currentPage = 1; }"
        />
      </div>
    </n-spin>
    <div class="add_cases">
      <NFlex style="align-items: center;" justify="space-between">

        <div style="display: flex;align-items: center;">
          <div style="margin-right: 10px">当前资产:</div>
          <n-tag style="margin-right: 10px" :bordered="false" type="success" size="large">
            储值金:{{ data.get_jf_data.weimei }}
          </n-tag>
          <n-tag style="margin-right: 10px" :bordered="false" type="success" size="large">
            积分:{{ data.get_jf_data.cdp }}
          </n-tag>
          <n-tag :bordered="false" type="success" size="large">
            优惠券:{{ data.get_jf_data.fujia_count }}
          </n-tag>

        </div>
        <n-button type="primary" style="width: 100px;margin-right: 30px" @click="add_order">
          <TheIcon icon="material-symbols:add" :size="16" class="mr-5" />
          去开单
        </n-button>
      </NFlex>
    </div>
  </div>

  <n-drawer v-model:show="modalVisible" width="100%">
    <n-drawer-content title="开单" closable style="width:100%;">
          <n-card embedded size="small" style="width:100%;height: 100%" :bordered="false"
                  :segmented="{content: true,footer: 'soft',}">
            <template #header>
              <n-tabs type="line" @update:value="handleUpdateValue">
                <n-tab name="套餐">套餐</n-tab>
                <n-tab name="品项">品项</n-tab>
                <n-tab name="储值">储值</n-tab>
                <n-tab name="会员卡">会员卡</n-tab>
              </n-tabs>
            </template>
            <template #header-extra>
              <NInput v-model:value="data.card_name" placeholder="请输入商品名称检索" :loading="data.goods_loading" clearable @change="get_goods"></NInput>
            </template>

            <n-spin :show="data.goods_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 300px);">
              <n-scrollbar  style="max-height: calc(100vh - 240px);padding:0 20px 20px 0px">

             <n-grid x-gap="12" y-gap="12"  :cols="data.category_id===0?3:4">
                <n-gi v-for="item in data.tab_goods">
                      <n-card  size="large"  :segmented="{content: true,footer: 'soft',}">
                        <template #header>
                          <n-h6 prefix="bar" type="error"
                                style="margin: 0;font-size: 14px;height: 30px;display: flex;align-items: center">
                            <img :src="item.image" style="width: 30px;height: 30px;border-radius: 5px;"
                                    v-if="item.image" />&nbsp;
                            <n-ellipsis :line-clamp="1">{{ item.title }}</n-ellipsis>
                          </n-h6>
                        </template>
                        <template #header-extra>
                          <n-switch size="medium" v-model:value="item.select" @update:value="(newValue) => handleChange(item, newValue)"></n-switch>
                        </template>
<!--                        <div v-if="data.category_id===0||data.category_id===100">-->
<!--                          <n-scrollbar style="height: 150px">-->
<!--                            <NFlex v-for="item3 in item.card_project">-->
<!--                                <div style="width:100%;display: flex;justify-content: space-between;margin-bottom: 4px;height: 30px">-->
<!--                                  <NTag type="success">{{item3.cate_name}}</NTag>{{item3.project.project_name}}-->
<!--                                  <n-input-number :disabled="item3.is_must===1" min="0" v-model:value="item3.frequency" size="small" style="width: 55px;" :show-button="false">-->
<!--                                    <template #suffix>次</template>-->
<!--                                  </n-input-number>-->
<!--                                </div>-->

<!--                            </NFlex>-->


<!--                          </n-scrollbar>-->
<!--                        </div>-->

                        <template #footer>
                          <NFlex justify="space-between">
                            <div style="color: #d95b74"  v-if="data.category_id===99">￥{{data.chuzhi}}</div>
                            <div style="color: #d95b74"  v-else>￥{{item.price}}</div>
                            <div style="color: #d95b74" v-if="item.must_check>0"><n-button size="tiny" type="error">可选{{item.must_check}}</n-button></div>

                            <div v-if="data.category_id===99">
                              <n-input-number  size="small" v-model:value="data.chuzhi"  placeholder="储值金额" style="width: 150px" @update:value="pay_money" />
                            </div>
                          </NFlex>
                        </template>
                      </n-card>
                </n-gi>
             </n-grid>
              </n-scrollbar>



            </n-spin>

          </n-card>
      <div style="width: 100%;position: fixed;bottom: 0;left:0;background:#F2F2F2;padding: 20px;border-top-left-radius:20px;border-top-right-radius: 20px">
        <div style="border-bottom: 1px solid #ddd;padding: 0 0 10px 0">
          <NFlex style="align-items: center;width: 100%" justify="space-between">
            <div style="display: flex;align-items: center;">
              <div style="display: flex">
                <NAvatar :src="data.select_customer.avatar" class="avatar"/>
                <div class="info">
                  <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                  <span class="no">No.{{ data.select_customer.card_number }}</span>
                </div>
              </div>
              <n-tag style="margin-right: 10px;margin-left: 10px" :bordered="false" type="success" size="large">
                储值金:{{ data.get_jf_data.weimei }}
              </n-tag>
              <n-tag style="margin-right: 10px" :bordered="false" type="success" size="large">
                积分:{{ data.get_jf_data.cdp }}
              </n-tag>
              <n-tag :bordered="false" type="success" size="large">
                优惠券:{{ data.get_jf_data.fujia_count }}
              </n-tag>

            </div>
            <n-button type="error" v-if="!data.order_more" @click="order_more" dashed>
              <TheIcon icon="material-symbols:arrow-warm-up-rounded" :size="18" class="mr-5" />
              <span v-if="modalForm.goods.length>0">已选{{modalForm.goods.length}}个商品,</span>
              展开详情
            </n-button>
            <n-button type="error" v-else  @click="order_more" dashed>
              <TheIcon icon="material-symbols:arrow-cool-down" :size="18" class="mr-5" />收起
            </n-button>
            <div style="display: flex">
              <n-button type="error" style="margin-right: 10px" >应付款￥{{modalForm.pay_money}}</n-button>
              <n-button type="primary" style="margin-right: 0px" @click="create_order">
                <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />挂单</n-button>
            </div>
          </NFlex>
        </div>
        <n-collapse-transition :show="data.order_more"  style="width: 100%; display: block;">
          <NFlex style="width: 100%;height: 500px;padding: 10px 0">
            <n-card  size="small"  :segmented="{content: true,footer: 'soft',}" style="flex:1">
                        <template #header>
                          <n-h6 prefix="bar"
                                style="margin: 0;font-size: 14px;height: 30px;display: flex;align-items: center">
                            商品清单
                          </n-h6>
                        </template>
                 <NFormItem label="" path="goods">
                    <n-scrollbar x-scrollable style="max-width: 1500px;padding-bottom: 20px;height: 400px"  trigger="none">
                    <n-layout style="width: 1500px">
                          <n-layout-header>
                            <n-flex >
                              <n-tag size="large" style="width: 120px"> 已选商品 </n-tag>
                              <n-tag size="large" style="width: 300px"> 已选项目 </n-tag>
                              <n-tag size="large" style="width: 80px"> 单价 </n-tag>
                              <n-tag size="large" style="width: 50px"> 数量 </n-tag>
                              <n-tag size="large" style="width: 80px"> 折扣 </n-tag>
                              <n-tag size="large" style="width: 80px"> 应收 </n-tag>
                              <n-tag size="large" style="width: 80px"> 佣金基数 </n-tag>
                              <n-tag size="large" style="width: 130px"> 治疗日期</n-tag>
                              <n-tag size="large" style="width: 100px"> 结算科室 </n-tag>
                              <n-tag size="large" style="width: 100px"> 顾问 </n-tag>
                            </n-flex>
                          </n-layout-header>
                          <n-layout-content content-style="padding: 10px 0;" >
                            <n-dynamic-input v-model:value="modalForm.goods" :on-remove="goods_remove" :max="modalForm.goods.length">
                              <template #action="{ index, create, remove, move }">
                                <n-space style="margin-left: 20px">
                                  <n-button  @click="() => remove(index)" type="error" dashed>
                                    <TheIcon icon="material-symbols:remove-selection" :size="18" class="mr-5" />移除
                                  </n-button>
                                </n-space>
                              </template>
                              <template #default="{ value , index}">
                                <n-flex>
                                  <n-input  placeholder="0" v-model:value="value.title" style="width: 120px" disabled />
                                   <n-select
                                    v-model:value="value.project_names"
                                    multiple
                                    disabled
                                    :max-tag-count="1"
                                     style="width: 300px"
                                    placeholder="无需选择"
                                  />

                                  <n-input  placeholder="0" v-model:value="value.money" style="width: 80px" disabled />
                                  <n-input-number :disabled="modalForm.display_num===1" placeholder="0" min="1" :show-button="false" v-model:value="value.num" style="width: 50px" @update:value="(val) => pay_money()" />
                                  <n-input-number :disabled="modalForm.display_num===1" placeholder="0" max="100" :show-button="false" v-model:value="value.zhekou" style="width: 80px" @update:value="(val) => pay_money1()">
                                    <template #suffix>%</template>
                                  </n-input-number>
                                  <n-popover trigger="hover" :show-arrow="false" placement="top" @show="initTempPriceValue(index)" style="width: 300px;">
                                    <template #trigger>
                                      <n-input :disabled="modalForm.display_num===1" placeholder="0" v-model:value="value.price" style="width: 80px" readonly />
                                    </template>
                                    <div style="padding: 16px; min-width: 280px;">
                                      <n-input-number
                                        :disabled="modalForm.display_num===1"
                                        v-model:value="data.tempPriceValue"
                                        min="0"
                                        style="width: 100%; margin-bottom: 12px;"
                                        placeholder="请输入价格"
                                        @keyup.enter="confirmPrice"
                                      />
                                      <n-button type="primary" size="medium" @click="confirmPrice" style="width: 100%;">确认</n-button>
                                    </div>
                                  </n-popover>
                                  <n-input :disabled="modalForm.display_num===1" placeholder="0" v-model:value="value.base_price" style="width: 80px"  />
                                  <n-date-picker
                                    v-model:formatted-value="value.ss_date"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    clearable
                                    placeholder="日期"
                                    style="width: 130px"
                                  />
                                  <NSelect
                                    v-model:value="value.keshi"
                                    :options="data.config.categorys"
                                    placeholder="科室"
                                    filterable
                                    label-field="name"
                                    value-field="id"
                                    style="width: 100px"
                                  />
                                  <NSelect
                                    v-model:value="value.face_id"
                                    :options="data.meeting_users"
                                    placeholder="顾问"
                                    filterable
                                    label-field="name"
                                    value-field="id"
                                    style="width: 100px"
                                  />
<!--                                  <n-dropdown v-if="data.category_id === 0" trigger="hover" :options="value.project_hk_price" label-field="label" style="width: 500px">-->
<!--                                      <n-button style="width: 100px">详情</n-button>-->
<!--                                  </n-dropdown>-->
                                </n-flex>
                              </template>
                            </n-dynamic-input>
                          </n-layout-content>
                        </n-layout>
                    </n-scrollbar>
                  </NFormItem>
                 </n-card>
              <n-card size="small" :segmented="{content: true,footer: 'soft'}" style="width: 400px;">
                <template #header>
                    <n-h6 prefix="bar" style="margin: 0;font-size: 14px;height: 30px;display: flex;align-items: center">
                        其他信息
                    </n-h6>
                </template>

                <!-- 添加滚动区域 -->
                <div style="max-height: 400px; overflow-y: auto;">
                    <NFormItem label="优惠卡券" path="fujia">
                        <NSelect
                            v-model:value="modalForm.fujia"
                            :options="data.fujia"
                            placeholder="请先选择卡券"
                            filterable
                            label-field="name"
                            value-field="id"
                            multiple
                            style="width: 100%"
                            @update:value="(val) => update_fjq()"
                            :disabled="modalForm.flag===1 || modalForm.display===1"
                        />
                    </NFormItem>
                    <NFormItem label="整单折扣" path="total_zhekou">
                        <n-popover trigger="hover" :show-arrow="false" placement="top" @show="initTempZhekouValue" style="width: 300px;">
                            <template #trigger>
                                <n-input-number :disabled="modalForm.flag===1 || modalForm.display===1" v-model:value="modalForm.deducts.total_zhekou" max="100" style="width: 100%" placeholder="请输入整单折扣" readonly>
                                    <template #suffix>%</template>
                                </n-input-number>
                            </template>
                            <div style="padding: 16px; min-width: 280px;">
                                <n-input-number
                                    :disabled="modalForm.flag===1 || modalForm.display===1"
                                    v-model:value="data.tempZhekouValue"
                                    max="100"
                                    style="width: 100%; margin-bottom: 12px;"
                                    placeholder="请输入整单折扣"
                                    @keyup.enter="confirmZhekou"
                                >
                                    <template #suffix>%</template>
                                </n-input-number>
                                <n-button type="primary" size="medium" @click="confirmZhekou" style="width: 100%;">确认</n-button>
                            </div>
                        </n-popover>
                    </NFormItem>
                    <NFormItem label="整单优惠价" path="deduct">
                        <n-popover trigger="hover" :show-arrow="false" placement="top" @show="initTempDeductValue" style="width: 300px;">
                            <template #trigger>
                                <n-input-number :disabled="modalForm.flag===1 || modalForm.display===1" v-model:value="modalForm.deducts.deduct" min="0" style="width: 100%" placeholder="请输入优惠抵扣" readonly />
                            </template>
                            <div style="padding: 16px; min-width: 280px;">
                                <n-input-number :disabled="modalForm.flag===1 || modalForm.display===1"
                                    v-model:value="data.tempDeductValue"
                                    min="0" 
                                    style="width: 100%; margin-bottom: 12px;" 
                                    placeholder="请输入优惠抵扣"
                                    @keyup.enter="confirmDeduct"
                                />
                                <n-button type="primary" size="medium" @click="confirmDeduct" style="width: 100%;">确认</n-button>
                            </div>
                        </n-popover>
                    </NFormItem>
<!--                    <NFormItem label="积分抵扣" path="cdp">-->
<!--                        <NInputNumber :disabled="modalForm.flag===1" @update:value="pay_money" style="width: 100%" min="0" :max="data.get_jf_data.cdp" v-model:value="modalForm.deducts.cdp" placeholder="请输入积分抵扣" />-->
<!--                    </NFormItem>-->
<!--                    <NFormItem label="储值抵扣" path="weimei">-->
<!--                        <NInputNumber :disabled="modalForm.flag===1" @update:value="pay_money" style="width: 100%" min="0" :max="data.get_jf_data.weimei" v-model:value="modalForm.deducts.weimei" placeholder="请输入储值抵扣" />-->
<!--                    </NFormItem>-->

                    <NFormItem label="订单备注" path="remark">
                        <NInput type="textarea" v-model:value="modalForm.remark" placeholder="请输入备注" style="width: 100%;height:100px"/>
                    </NFormItem>
                </div>
            </n-card>



          </NFlex>
        </n-collapse-transition>
      </div>



    </n-drawer-content>

  </n-drawer>

  <!-- 开卡抽屉 -->
  <n-drawer v-model:show="data.cardDrawerVisible" width="600px" placement="right">
    <n-drawer-content title="开卡" closable @close="closeCardDrawer">
      <div v-if="data.currentOrderItem">

        <n-card  size="large"  :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <n-h6 prefix="bar" type="error"
                  style="margin: 0;font-size: 14px;height: 30px;display: flex;align-items: center">
              <img :src="data.currentOrderItem.image" style="width: 30px;height: 30px;border-radius: 5px;"
                      v-if="data.currentOrderItem.image" />&nbsp;
              <n-ellipsis :line-clamp="1">{{ data.currentOrderItem.title }}</n-ellipsis>
            </n-h6>
          </template>
            <n-scrollbar >
              <div v-for="item2 in data.currentOrderItem.goods_arr.filter(item => item.card_id === data.currentOrderItemValue.card_id)">
                <NFlex v-for="item3 in item2.cards.Projects">
                  <div style="width:100%;display: flex;justify-content: space-between;margin-bottom: 4px;height: 30px">
                    <NTag type="success">{{item3.cate_name}}</NTag>{{item3.project['project_name']}}
                    <n-input-number :disabled="item3['is_must']===1" min="0" v-model:value="item3.frequency" size="small" style="width: 55px;" :show-button="false">
                      <template #suffix>次</template>
                    </n-input-number>
                  </div>
                </NFlex>
              </div>
            </n-scrollbar>
          <template #footer>
            <NFlex justify="space-between">
              <div style="color: #d95b74"  v-if="data.category_id===99">￥{{data.chuzhi}}</div>
              <div style="color: #d95b74"  v-else>￥{{data.currentOrderItem.price}}</div>{{data.currentOrderItem[0]}}
              <div style="color: #d95b74" v-if="data.currentOrderItem.goods_arr[0].nums_select>0"><n-button size="tiny" type="error">可选{{data.currentOrderItem.goods_arr[0].nums_select}}</n-button></div>
              <div v-if="data.category_id===99">
                <n-input-number  size="small" v-model:value="data.chuzhi"  placeholder="储值金额" style="width: 150px" @update:value="pay_money" />
              </div>
            </NFlex>
          </template>
        </n-card>
      </div>
      
      <template #footer>
        <n-space>
          <n-button @click="closeCardDrawer">取消</n-button>
          <n-button type="primary" @click="handleCardAction">确认开卡</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>

  <!-- 项目详情抽屉 -->
  <n-drawer v-model:show="data.projectStatDrawerVisible" width="800px" placement="right">
    <n-drawer-content title="项目详情" closable @close="closeProjectStatDrawer">
      <n-spin :show="data.projectStatLoading">
        <n-scrollbar style="max-height: calc(100vh - 200px)">
          <div v-if="!data.projectStatLoading && data.projectStatData.length === 0">
            <n-empty description="暂无数据" />
          </div>
          <n-table
            v-else
            :bordered="true"
            :single-line="false"
            style="margin-top: 10px"
          >
            <thead>
              <tr>
                <th style="text-align: center; width: 200px">项目名称</th>
                <th style="text-align: center; width: 120px">总数量</th>
                <th style="text-align: center; width: 120px">剩余数量</th>
                <th style="text-align: center; width: 120px">划扣单价</th>
                <th style="text-align: center; width: 150px">剩余价值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(project, index) in data.projectStatData" :key="index">
                <td style="text-align: center; padding: 12px">
                  <n-ellipsis :line-clamp="2" style="max-width: 200px">
                    {{ project.project_title || '--' }}
                  </n-ellipsis>
                </td>
                <td style="text-align: center; padding: 12px">
                  {{ project.all_number || 0 }}
                </td>
                <td style="text-align: center; padding: 12px">
                  {{ project.number || 0 }}
                </td>
                <td style="text-align: center; padding: 12px">
                  ¥{{ (project.single_price || 0).toFixed(2) }}
                </td>
                <td style="text-align: center; padding: 12px; color: #18a058; font-weight: 500">
                  ¥{{ ((project.number || 0) * (project.single_price || 0)).toFixed(2) }}
                </td>
              </tr>
            </tbody>
          </n-table>
          
        </n-scrollbar>
      </n-spin>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center; padding: 10px 0;">
          <div style="font-size: 16px; font-weight: 600; color: #18a058;">
            总剩余价值: <span style="font-size: 20px; margin-left: 8px;">¥{{ calculateTotalRemainingValue().toFixed(1) }}</span>
          </div>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>

</template>


<style>
.container {
  padding: 10px;
  /* transform: translate(0); */
  position: relative;
  height: 100%;

  .search {
    margin-bottom: 10px;
  }
}

.cards {
  margin: 0px;
}

.project {
  margin-bottom: 10px;
}

.order_more{
  padding:5px 20px;
  background: #f2f2f2;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 14px;
}

.project_list {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 5px;

}

.add_cases {
  height: 60px;
  position: absolute;
  bottom: 0;
  background: #eee;
  width: 100%;
  padding: 10px;
  border-top-left-radius: 5px;
}

.tags {
  margin-right: 5px;
}

.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.info {
  height: 40px;
  line-height: 20px;
  font-size: 12px;

  .no {
    font-size: 12px;
  }

}

</style>